<template>
  <div>
    <div class="newFriend" @click="goNewFriend">
      <van-icon name="friends-o" />
      <van-badge
        :content="
          addressBook.addressBookUnReadCount === 0
            ? ''
            : addressBook.addressBookUnReadCount
        "
      >
        <span>新的朋友</span>
      </van-badge>
    </div>
    <van-index-bar>
      <template v-for="(item, index) in friendList" :key="item.index">
        <van-index-anchor :index="item.index" />
        <div
          v-for="(e, i) in item.data"
          :key="e.friendUid"
          class="cell"
          @click="onSelect(e)"
        >
          <van-image :src="e.userAvatar || defaultAvatar" fit="cover" />
          <span>{{ e.userName }}</span>
        </div>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { getFriendList, addFriend, getUserList } from "@/api/user";
import { pinyin } from "pinyin-pro";
import { useRouter } from "vue-router";
import defaultAvatar from "@/assets/cat.jpeg";
import addressBookStore from "@/store/module/addressBook";

const userInfo = localStorage.getItem("userInfo")
  ? JSON.parse(localStorage.getItem("userInfo"))
  : null;
onMounted(() => {
  // console.log(pinyin(str, { toneType: 'none' }));
  getFriendList().then((res) => {
    if (res.code === 200) {
      let userIdList = res.data.friendList.map((item) =>
        item.friendId !== userInfo.uid ? item.friendId : item.userId
      );
      getUserList({
        userIdList: userIdList,
      }).then((res) => {
        if (res.code === 200) {
          res.data.userList.forEach((item) => {
            let obj = {
              index: "",
              data: [],
            };
            if (!isChinese(item.userName)) {
              obj.index = item.userName.slice(0, 1).toUpperCase();
              obj.data.push(item);
            }
            if (isChinese(item.userName)) {
              obj.index = pinyin(item.userName, {
                toneType: "none",
              })[0][0].toUpperCase();
              obj.data.push(item);
            }
            friendList.push(obj);
          });
          grouping(friendList);
          sortArr(friendList);
        }
      });
    }
  });
});
let addressBook = addressBookStore();
const router = useRouter();
function goNewFriend() {
  router.push("/newFriendsList");
}
function sortArr(arr) {
  // 根据英文首字母进行排序
  arr.sort(function (a, b) {
    return (a.index + "").localeCompare(b.index + "");
  });
}
function grouping(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i].index === arr[j].index) {
        arr[i].data = arr[i].data.concat(arr[j].data);
        arr.splice(j, 1);
        j--;
      }
    }
  }
}
const onSelect = (e) => {
  // 使用 History API 方式传递和接收
  router.push({
    name: "IdCard",
    state: { userInfo: { ...e } },
  });
};
function isChinese(temp) {
  var re = /[^\u4E00-\u9FA5]/;
  if (re.test(temp)) return false;
  return true;
}
let friendList = reactive([]);
</script>

<style scoped lang="scss">
.newFriend {
  font-size: 14px;
  padding: 15px 0 15px 15px;
  display: flex;
  align-items: center;
  border-bottom: #eee solid 1px;

  .van-icon {
    font-size: 20px;
    background-color: #fa9d3b;
    color: #fff;
    padding: 5px;
    margin-right: 5px;
  }
}

.cell {
  display: flex;
  align-items: center;
  margin: 20px 15px;
  font-size: 14px;

  :deep(.van-image__img, .van-image__error, .van-image__loading) {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-right: 10px;
  }
}
</style>
